{extend name='public/base' /}

{block name="content"}
<style type="text/css">
    html {
        background-color: #fff !important;
    }
    .center{
        align-items: center;
        text-align: center;
    }
</style>
<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-body">
            <div style=" width:800px;">
                <div style="font-weight: 600;font-size: 18px;line-height: 50px;">缴费信息</div>
                <div style="display: flex;justify-content:space-between;">
                    <span style=" width: 500px;line-height: 35px;font-size: 14px;">缴费单号：{$info.cost.order_no}</span>
                    <span style=" width: 500px;line-height: 35px;font-size: 14px;">支付状态：{$info.cost.pay_status}</span>
                </div>
                <div style="font-weight: 600;font-size: 18px;line-height: 50px;">报修信息</div>
                <div style="display: flex;justify-content:space-between;">
                    <span style=" width: 500px;line-height: 35px;font-size: 14px;">服务单号：{$info.order_sn}</span>
                    <span style=" width: 500px;line-height: 35px;font-size: 14px;">服务单号：{$info.order_sn}</span>
                    <span style=" width: 500px;line-height: 35px;font-size: 14px;">报修类型：{$info.repairType.name}</span>
                    <span style=" width: 500px;line-height: 35px;font-size: 14px;">报修商户：{$info.merchant.merchant_name}</span>
                </div>
                <div style="display: flex;justify-content:space-between;">
                    <span style=" width: 500px;line-height: 35px;font-size: 14px;">报 修 人：{$info.repair_name}</span>
                    <span style=" width: 500px;line-height: 35px;font-size: 14px;">联系电话：{$info.repair_mobile}</span>
                    <span style=" width: 500px;line-height: 35px;font-size: 14px;">报修时间：{$info.create_time}</span>
                </div>
                <div style="display: flex;justify-content:space-between;">
                    <span style=" width: 500px;line-height: 35px;font-size: 14px;">问题描述：{$info.describe}</span>
                </div>
                <div style="display: flex;justify-content:space-between;">
                    <div style="display: flex;justify-content:space-between;">相关图片：
                        {if $info['images']}
                        {foreach $info['images'] as $v}
                        <img src="{$v}" alt="" style="width: 100px;height: 100px">
                        {/foreach}
                        {/if}
                    </div>
                </div>
            </div>
            {if condition="$info['status'] > 1"}
            <div style="width: 600px;">
                <div style="font-weight: 600;font-size: 18px;line-height: 50px;">维修信息</div>
                <div style="display: flex;justify-content:space-between;">
                    <span style="line-height: 35px;font-size: 14px;">维修人：{$info.dispose_name}</span>
                    <span style="line-height: 35px;font-size: 14px;">接单时间：{$info.order_time}</span>
                    <span style="line-height: 35px;font-size: 14px;">完工时间：{$info.dispose_time}</span>
                </div>
                <div style="display: flex;justify-content:space-between;width: 396px;">
                    <span style="line-height: 35px;font-size: 14px;">处理结果：{$info.dispose_result}</span>
                </div>
                <div style="display: flex;justify-content:space-between;">
                    <div style="display: flex;justify-content:space-between;">相关图片：
                        {if $info['dispose_image']}
                        {foreach $info['dispose_image'] as $v}
                        <img src="{$v}" alt="" style="width: 100px;height: 100px">
                        {/foreach}
                        {/if}
                    </div>
                </div>
            </div>
            {if condition="$info['dispose_material'] != null"}
            <div style="width: 600px;">
                <div style="font-weight: 600;font-size: 18px;line-height: 50px;">费用信息</div>
                <div style="display: flex;justify-content:space-between;">
                    <span style="line-height: 35px;font-size: 14px;">合计：{$info.allMoney}</span>
                    <span style="line-height: 35px;font-size: 14px;">物料费：{$info.materialMoney}</span>
                    <span style="line-height: 35px;font-size: 14px;">工时费：{$info.hourMoney}</span>
                </div>
                <table class="layui-table">
                    <thead>
                    <tr>
                        <td class="center">物料名称</td>
                        <td class="center">数量</td>
                        <td class="center">单价</td>
                        <td class="center">小计</td>
                    </tr>
                    </thead>
                    <tbody class="role_list">
                    {foreach $info['dispose_material'] as $key=>$id}
                    <tr>
                        <td class="center">{$id[1]}</td>
                        <td class="center">{$id[2]}</td>
                        <td class="center">{$id[3]}</td>
                        <td class="center">{$id[4]}</td>
                    </tr>

                    {/foreach}
                    </tbody>

                </table>
            </div>
            {/if}
            {/if}
        </div>
    </div>
</div>
{/block}

{block name="js"} <!--js处理区-->


<script>
    layui.use(['element', 'table', 'form', 'jquery', 'lucky', 'opTable'], function () {
        var element = layui.element;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;
        var lucky = layui.lucky;
        var opTable = layui.opTable;
        form.render();

        form.on('submit(charge)', function (obj) {
            var _id = "{$info.id}"
            lucky.CreateOpenForm("审核提交", "{:url('common/costEdit')}?id=" + _id);
            return false;
        });
        /**
         * 关键词搜索树
         */
        form.on('submit(search)', function (obj) {
            lucky.CreateSearch(obj.field);
            return false;
        });
    });

</script>

{/block}
